<template>
  <view class="settings-container p-2 card rounded">
    <uni-list>
      <uni-list-item 
        v-for="(item, index) in settingsList" 
        :key="index"
        :title="item.title"
        :to="item.path"
        :showArrow="true"
        @click="handleClick(item)"
      >
        <template #header>
          <text class="bi" :class="item.icon"></text>
        </template>
        <template #footer>
          <text v-if="item.value" class="value-text">{{ item.value }}</text>
        </template>
      </uni-list-item>

      <!-- 字体大小调节 -->
      <uni-list-item title="字体大小">
        <template #header>
          <text class="bi bi-type"></text>
        </template>
        <template #footer>
          <view class="font-size-control">
            <text class="size-label">A</text>
            <slider 
              :value="fontSize" 
              :min="12" 
              :max="24" 
              :step="1"
              @change="handleFontSizeChange"
              show-value
              class="size-slider"
            />
            <text class="size-label large">A</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>

    <view class="font-preview">
      <text>字体预览效果</text>
      <view class="preview-text" :style="{ fontSize: `${fontSize}px` }">
      墨枢
      </view>
    </view>

    <view class="version-info">
      <text class="version">当前版本 1.0.0</text>
    </view>
    
    <view class="admin-link" @click="goToAdminLogin">
      <text class="admin-text">后台管理系统</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const fontSize = ref(16); // 默认字体大小

// 处理字体大小变化
const handleFontSizeChange = (e) => {
  fontSize.value = e.detail.value;
  // 保存到本地存储
  uni.setStorageSync('app_font_size', fontSize.value);
  
  // 更新全局字体大小
  // #ifdef H5
  document.documentElement.style.fontSize = `${fontSize.value}px`;
  // #endif
  
  // #ifdef MP-WEIXIN
  // 小程序中可以使用 CSS 变量来控制字体大小
  uni.setStorageSync('mp_font_size', fontSize.value);
  // 触发更新
  uni.$emit('fontSizeChange', fontSize.value);
  // #endif
};

onMounted(() => {
  // 从本地存储获取字体大小设置
  const savedFontSize = uni.getStorageSync('app_font_size');
  if (savedFontSize) {
    fontSize.value = savedFontSize;
    // #ifdef H5
    document.documentElement.style.fontSize = `${savedFontSize}px`;
    // #endif
  }
});

const goToAdminLogin = () => {
  uni.navigateTo({
    url: '/pages/other/admin/adminlogin'
  });
};

const settingsList = [
  {
    title: '账号安全',
    icon: 'bi-shield-lock',
    path: '/pages/my/security'
  },
  {
    title: '隐私设置',
    icon: 'bi-eye-slash',
    path: '/pages/my/privacy'
  },
  {
    title: '消息通知',
    icon: 'bi-bell',
    path: '/pages/my/notifications'
  },
  {
    title: '清除缓存',
    icon: 'bi-trash',
    action: 'clearCache',
    value: '0MB'
  },
  {
    title: '关于我们',
    icon: 'bi-info-circle',
    path: '/pages/my/about'
  }
];

const handleClick = (item) => {
  if (item.action === 'clearCache') {
    uni.showModal({
      title: '提示',
      content: '确定要清除缓存吗？',
      success: (res) => {
        if (res.confirm) {
          clearCache();
        }
      }
    });
  }
};

const clearCache = () => {
  uni.showLoading({
    title: '清理中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '清理完成',
      icon: 'success'
    });
  }, 1500);
};
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx 0;
}

.bi {
  font-size: 20rpx;
  margin-right: 20rpx;
  color: var(--td-brand-color);
}

.value-text {
  font-size: 28rpx;
  color: #999;
}

.version-info {
  text-align: center;
  padding: 40rpx;
  
  .version {
    font-size: 24rpx;
    color: #999;
  }
}

.font-size-control {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 400rpx;
}

.size-label {
  font-size: 24rpx;
  color: #666;
  
  &.large {
    font-size: 32rpx;
  }
}

.size-slider {
  flex: 1;
}

.font-preview {
  margin: 40rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  text-align: center;
  
  text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .preview-text {
    color: #333;
    line-height: 1.5;
    transition: font-size 0.3s;
  }
}

.admin-link {
  text-align: center;
  padding: 40rpx;
  color: var(--td-brand-color);
  cursor: pointer;
}

.admin-text {
  font-size: 28rpx;
  display: inline-block;
  border-bottom: 1px dashed var(--td-brand-color);
  padding-bottom: 4rpx;
}
</style> 